<template>
  <!-- 系统管理-租户管理 -->
  <div class="app-container">
    <div class="search-div">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="租户名称">
          <el-input v-model="form.tenantName" style="width: 200px" clearable/>
        </el-form-item>
        <el-form-item label="租户简称">
          <el-input v-model="form.simpleName" style="width: 200px" clearable/>
        </el-form-item>
        <el-form-item label="服务时间">
          <el-date-picker
              v-model="date"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-div">
      <div class="table-oper-div">
        <el-button type="success" :icon="Plus" @click="openDialog('add')" circle/>
        <el-button type="primary" :icon="Edit" @click="openDialog('edit')" circle/>
        <el-button type="danger" :icon="Delete" @click="deleteTenement" circle/>
      </div>
      <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          border
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column property="tenantName" label="租户名"/>
        <el-table-column property="simpleName" label="租户简称"/>
        <el-table-column property="tenantKey" label="分库标识"/>
        <el-table-column property="dbUrl" label="分库地址"/>
        <el-table-column property="serveTime" label="服务截至时间">
          <template #default="scope">
            {{ scope.row.serveTime.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column property="status" label="租户状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 1" type="success">启动</el-tag>
            <el-tag v-else type="danger">停用</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-size="form.pageSize" v-model:current-page="form.pageNum"
                     @current-change="handleCurrentChange" layout="prev, pager, next" v-model:total="form.total"/>
    </div>
    <!--  新增、编辑弹窗 -->
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="600"
        :destroy-on-close="true"
    >
      <tenement-edit :form="editForm" :disabled="dialogTitle==='编辑租户'" @save="saveCallBack" @close="dialogVisible = false"></tenement-edit>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import {getTenementPageApi, removeTenementApi} from "@/assets/api/system/tenement";
import {ElMessage, ElMessageBox} from "element-plus";
import TenementEdit from "@/components/view/system/tenement/tenementEdit.vue";

const form = reactive({
  tenantName: '',
  simpleName: '',
  startDate: '',
  endDate: '',
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

// 搜索日期区间
const date = ref([]);
// 搜索
const onSubmit = () => {
  form.pageNum = 1;
  form.startDate = date.value[0];
  form.endDate = date.value[1];
  getTableData();
}

// 重置
const onReset = () => {
  form.tenantName = '';
  form.simpleName = '';
  form.startDate = '';
  form.endDate = '';
  date.value = [];
}

// 全选按钮
const multipleTableRef = ref()
const multipleSelection = ref([])

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 获取表格数据
const tableData = ref([])
const getTableData = () => {
  getTenementPageApi(form).then(res => {
    tableData.value = res.data.data.records;
    form.total = res.data.data.total;
  })
}

// 页码切换处理器
const handleCurrentChange = () => {
  getTableData();
}

// 新增、编辑弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('')
const editForm = ref({}); // 编辑的数据
const openDialog = (tag) => {
  if (tag === 'edit' && multipleSelection.value.length !== 1) {
    ElMessage({
      message: '请选择一条数据进行编辑',
      type: 'warning'
    });
    return;
  }
  dialogTitle.value = tag === 'add' ? '新增租户' : '编辑租户';
  if (tag === 'edit') {
    editForm.value = JSON.parse(JSON.stringify(multipleSelection.value[0]));
  } else {
    editForm.value = {};
  }
  dialogVisible.value = true;
}

// 编辑修改回调
const saveCallBack = (saved) => {
  if (saved) {
    dialogVisible.value = false;
    getTableData();
  }
}

// 删除租户
const deleteTenement = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage({
      message: '请选择一条数据进行删除',
      type: 'warning'
    });
    return;
  }
  ElMessageBox.confirm(
      '请优先使用编辑修改租户状态，删除不可反悔，谨慎使用。',
      '重要提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    // 将对象中的id取出组成新的数组，然后使用join拼接
    const ids = multipleSelection.value.map(item => item.tenantId);
    removeTenementApi(ids.join(",")).then(res => {
      if (res.data.code === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getTableData();
      } else {
        ElMessage({
          type: 'error',
          message: res.data.data,
        })
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}

onMounted(() => {
  getTableData();
})
</script>

<style scoped>
.app-container {
  padding: 10px;
}

.search-div {
  margin-bottom: 20px;
}

.table-oper-div {
  padding-left: 15px;
  padding-bottom: 10px;
}
</style>